/**
 * desc： 演化管理
 * author：DestinyJun
 * date：  2020/4/21 17:01
 */
import React, {Component} from 'react';
import './Evolution.scss';
import {FlinkApi, FlinkTypeApi} from "../../service/Apis";
import {Button, Form, InputNumber, Modal, Select, Space, Table, DatePicker, Pagination} from "antd";
import {post} from "../../service/Interceptor";
import {ModalHeader} from "../../components/ModalHeader";
import moment from "moment/moment";
const { Option } = Select;

export class Evolution extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flink_list: [],
      flink_visible: false,
      flink_id: null,
      flink_type_list: [],
      flink_pageNo: 1,
      flink_totalPage: 0,
      disease_id: null,
      count_date: null,
    };
    // 表单模型
    this.flink_formRef = React.createRef();
    // 表头信息定义
    this.flink_column = [
      {
        title: '传染病名称',
        dataIndex: 'disease_name',
      },
      {
        title: '所属年份',
        dataIndex: 'count_date',
      },
      {
        title: '总人数',
        dataIndex: 'person_total',
      },
      {
        title: '感染人数',
        dataIndex: 'person_infections',
      },
      {
        title: '接种人数',
        dataIndex: 'person_vaccination',
      },
      {
        title: '死亡人数',
        dataIndex: 'person_death',
      },
      {
        title: '操作',
        render: (item) => {
          return(
            <Space size="middle">
              <Button type={'primary'} style={{background: '#00E3CA',borderColor: '#00E3CA'}} onClick={this.flinkUpdate.bind(this,item)}>编辑</Button>
              <Button type={'primary'} danger onClick={this.flinkDel.bind(this,item)}>删除</Button>
            </Space>
          )
        },
      }
    ]
    // 校验信息定义
    this.flink_validateMessages = {
      required: '${label}是必填项!',
      types: {
        number: '${label}必须是数字',
      },
    };
    this.count_date = null;

  }

  // 生命周期
  componentDidMount() {
    this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);
    // 初始化友情链接类型
    post(FlinkTypeApi.GET_FLINK_TYPE, {})
      .then(res => {
        this.setState({
          flink_type_list: res.data.map(item => ({...item,key: item.id})),
        })
      })
  }

  // 初始化树结构
  flinkInit(pageNo,disease_id,count_date) {
    post(FlinkApi.GET_FLINK, {pageNo,pageSize: 8,disease_id,count_date})
      .then(res => {
        this.setState({
          flink_list: res.data.map(item => ({...item,key: item.id})),
          flink_visible: false,
          flink_totalPage: res.totalRecord,
        })
      },() => {
      })
  }

  // 添加/编辑保存
  flinkSave () {
    let url,data;
    data = this.flink_formRef.current.getFieldsValue()
    if (!this.state.flink_id) {
      url = FlinkApi.ADD_FLINK;
    } else {
      url = FlinkApi.UPDATE_FLINK;
      data['id'] = this.state.flink_id;
    }
    data.count_date = moment(data.count_date).format('YYYY')
    post(url, data)
      .then(() => {
        this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);
      })
      .catch(err => {})

  }

  // 删除
  flinkDel (item) {
    if (window.confirm('确定要删除么?')) {
      post(FlinkApi.DEL_FLINK, {id: item.id})
        .then(() => {
          this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);
        })
        .catch(err => {})
    }
  }

  // 编辑初始化
  flinkUpdate (item) {
    this.setState({
      flink_visible: true,
      flink_id: item.id,
    },() => {
      this.flink_formRef.current.setFieldsValue({
        disease_id: item.disease_id,
        count_date: moment(item.count_date, 'YYYY'),
        person_total: item.person_total,
        person_infections: item.person_infections,
        person_vaccination: item.person_vaccination,
        person_death: item.person_death,
      })
    })
  }

  // render渲染
  render() {
    return (
      <div className={'flink'}>
        <h2 className="flink-title">演化管理</h2>
        <div className="flink-btn">
          <Button type={'primary'} onClick={() => this.setState({flink_visible: true})}>演化添加</Button>
          <Select
            style={{width: '20%',marginLeft: '15px'}}
            placeholder={'点击选择传染病'}
            value={this.state.disease_id}
            notFoundContent={<span>暂无内容</span>}
            onChange={(res) => {
              this.setState({
                flink_pageNo: 1,
                disease_id: res,
              },() => {this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);})
            }}
          >
            {
              this.state.flink_type_list.length > 0 &&
              this.state.flink_type_list.map((item,index) => (<Option key={`flink_${index}`} value={item.id}>{item.disease_name}</Option>))
            }
          </Select>
          <DatePicker
            value={this.state.count_date?moment(this.state.count_date):null}
            placeholder={'请选择年份'} picker="year"
            style={{width: '20%',marginLeft: '15px'}}
            onChange={(time) => {
            this.setState({
              flink_pageNo: 1,
              count_date: moment(time).format('YYYY'),
            },() => {this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);})
          }} />
          <Button type={'primary'} onClick={() => {
            this.setState(
              {
                flink_pageNo: 1,
                count_date: null,
                disease_id: null,
              },() => {
              this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);
            })
          }} style={{marginLeft: '15px'}}>重置</Button>
        </div>
        <div className="flink-table">
          {
            this.state.flink_list.length>0 &&
            <Table
              columns={this.flink_column}
              pagination={false}
              scroll={{ y: '63vh' }}
              dataSource={this.state.flink_list}
            />
          }
          <Pagination
            hideOnSinglePage={true}
            showSizeChanger={false}
            pageSize={8} style={{marginTop: '5px'}}
            defaultCurrent={this.state.flink_pageNo}
            onChange={(num) => {
              this.setState({
                flink_pageNo: num
              },() => {
                this.flinkInit(this.state.flink_pageNo, this.state.disease_id, this.state.count_date);
              })
            }}
            total={this.state.flink_totalPage} />
        </div>
        <div className="flink-modal">
          {/*form弹窗*/}
          <Modal
            title={<ModalHeader title={'演化操作'} />}
            closable={false}
            visible={this.state.flink_visible}
            centered
            okText={'确认'}
            afterClose={() => {
              this.flink_formRef.current.resetFields();
              this.setState({
                flink_visible: false,
                flink_default_img: [],
              })
            }}
            onOk={() => {
              this.flink_formRef.current.submit()
            }}
            cancelText={'取消'}
            onCancel={() => this.setState({flink_visible: false})}
          >
            <Form
              className={'form'}
              ref={this.flink_formRef}
              name={'form'}
              validateMessages={this.flink_validateMessages}
              labelCol={{span: 6}}
              wrapperCol={{span: 16}}
              onFinish={this.flinkSave.bind(this)}
            >
              <Form.Item label="传染病" name="disease_id" rules={[{required: true}]}>
                <Select placeholder={'点击选择传染病'} notFoundContent={<span>暂无内容</span>}>
                  {
                    this.state.flink_type_list.length > 0 &&
                    this.state.flink_type_list.map((item,index) => (<Option key={`flink_${index}`} value={item.id}>{item.disease_name}</Option>))
                  }
                </Select>
              </Form.Item>
              <Form.Item label="所属年份" name="count_date" rules={[{required: true}]}>
                <DatePicker placeholder={'请选择年份'} picker="year" style={{width: '100%'}} />
              </Form.Item>
              <Form.Item label="总人数" name="person_total" rules={[{required: true}]}>
                <InputNumber placeholder={'请输入总人数'} style={{width: '100%'}} rules={[{types: 'number'}]} />
              </Form.Item>
              <Form.Item label="感染人数" name="person_infections" rules={[{required: true}]}>
                <InputNumber placeholder={'请输入感染人数'} style={{width: '100%'}} rules={[{types: 'number'}]} />
              </Form.Item>
              <Form.Item label="接种人数" name="person_vaccination" rules={[{required: true}]}>
                <InputNumber placeholder={'请输入接种人数'} style={{width: '100%'}} rules={[{types: 'number'}]} />
              </Form.Item>
              <Form.Item label="死亡人数" name="person_death" rules={[{required: true}]}>
                <InputNumber placeholder={'请输入死亡人数'} style={{width: '100%'}} rules={[{types: 'number'}]} />
              </Form.Item>
            </Form>
          </Modal>
        </div>
      </div>
    );
  }
}
